<template>
  <div>
    <div id="mars3dContainer" class="mars3d-container"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as mars3d from 'mars3d';
import { initMap, map } from './map';
let graphicLayer;
let trafficLayer;
let tiles3dLayer;
onMounted(() => {
  initMap();
  graphicLayer = new mars3d.layer.GraphicLayer();
  // trafficLayer = new mars3d.Traffic();
  // map.addLayer(trafficLayer);
  map.addLayer(graphicLayer);
  console.log(map, 'map');
  addDemoGraphic4();
  // showMaxShihuaDemo()
});

function addDemoGraphic4() {
  const graphic = new mars3d.graphic.WallPrimitive({
    positions: [
    [121.766887, 31.173788],
    [121.780714, 31.131685],
    [121.785642, 31.112641],
    [121.786498, 31.109786],
    [121.788209, 31.108545],
    [121.790628, 31.107854],
    [121.792422, 31.108355],
    [121.799682, 31.109896],
    [121.801401, 31.111064],
    [121.803492, 31.112638],
    [121.807302, 31.112858],
    [121.810053, 31.113375],
    [121.825344, 31.11698],
    [121.827696, 31.112987],
    [121.842055, 31.117052],
    [121.822822, 31.167529],
    [121.815334, 31.172123],
    [121.807395, 31.180241],
    [121.802537, 31.179115],
    [121.789868, 31.175603],
    [121.785362, 31.18001],
    [121.76757, 31.174819],
    [121.766909, 31.173656],
    [121.766864, 31.17392],
    ],
    style: {
      closure: true,
      diffHeight: 800,
      materialType: mars3d.MaterialType.LineFlow,
      materialOptions: {
        // 动画线材质
        image: "img/basemaps/fence.png",
        axisY: true,
        color: "#ff0000",
        speed: 10, // 速度，建议取值范围1-100
        // materialType: "LineFlow"
      },
      // outline: true,
    },
    attr: { remark: "示例4" }
  })
  graphicLayer.addGraphic(graphic)
}

 function showMaxShihuaDemo() {

  tiles3dLayer = new mars3d.layer.TilesetLayer({
    name: "石化工厂",
    url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json",
    position: { lng: 117.077158, lat: 31.659116, alt: -2.0 },
    maximumScreenSpaceError: 1,
    // shadows: Cesium.ShadowMode.DISABLED,
    // 以下参数可以参考用于3dtiles总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考。
    skipLevelOfDetail: true,
    loadSiblings: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10,
    preferLeaves: true,
    preloadWhenHidden: true,
    enableDebugWireframe: true, // 是否可以进行三角网的切换显示
    // 以上为优化的参数

    // popup: "all",
    highlight: {
      type: mars3d.EventType.click, // 默认为鼠标移入高亮，也可以指定click单击高亮
      outlineEffect: true, // 采用OutlineEffect方式来高亮
      color: "#00FF00",
      width: 6,
    },
    center: { lat: 31.653047, lng: 117.084439, alt: 354, heading: 319, pitch: -23 },
    flyTo: true
  })
  map.addLayer(tiles3dLayer)

  // 可以绑定Popup弹窗，回调方法中任意处理
  tiles3dLayer.bindPopup(function (event) {
    const attr = event.graphic.attr
    // attr["视频"] = `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`;
    return mars3d.Util.getTemplateHtml({ title: "石化工厂", template: "all", attr })
  })

  // 单击事件
  tiles3dLayer.on(mars3d.EventType.click, function (event) {
    console.log("单击了3dtiles图层", event)
  })
}
</script>
 
<style scoped >
.mars3d-container {
  width: 100vw;
  height: 100vh;
}
</style>